<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-16 11:38:36
 * @LastEditors: william
 * @LastEditTime: 2025-08-28 18:49:12
-->
<template>
  <div
    ref="refChart"
    :class="className"
    :style="{ height: height, width: width, 'min-height': '120px' }"
  />
</template>

<script setup>
const props = defineProps({
  className: {
    type: String,
    default: 'nw-chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  type: {
    type: String,
    default: '' // 1-菜品总数量/2-数量最多菜品/3-工作总时长/4-最长时间设备
  },
  dataSource: {
    type: Object,
    default: () => ({xData: [], yData: []})
  }
})

watch(
  () => props.dataSource,
  () => {
    console.log('barchart props.dataSource==', props.dataSource)
    nextTick(() => {
      useChartMixin({
        refChart,
        myChart,
        setOptions
      }).initChart()
    })
  },
  {deep: true, immediate: true}
)

const refChart = ref(null)
const myChart = ref(null)

onMounted(_ => {
 
})

const setOptions = _ => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '40px',
      left: '15px',
      right: '15px',
      bottom: '0',
      containLabel: true
    },
    color: g_style.chartColorArr.split(','),
    xAxis: {
      type: 'category',
      boundaryGap: 20,
      data: props.dataSource.xData,
      axisLine: {
        lineStyle: {
          color: '#666666'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name:
          props.type === '3' || props.type === '4'
            ? '工作时长/小时'
            : '烹饪数量/份',
        axisLabel: {
          formatter: value => g_utils.numberConversion(value)
        },
        axisLine: {
          lineStyle: {
            color: '#666666'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#dddddd'
          }
        }
      }
    ],
    series: [
      {
        type: 'bar',
        data: props.dataSource.yData,
        data: [
          {
            name: '川菜',
            value: 688,
            color: '#FF6347',
            description: '以麻辣鲜香为特色',
            count: 688
          },
          {
            name: '浙菜',
            value: 837,
            color: '#4682B4',
            description: '注重原汁原味，清淡鲜嫩',
            count: 837
          },
          {
            name: '粤菜',
            value: 242,
            color: '#3CB371',
            description: '选料精细，口味清淡',
            count: 242
          },
          {
            name: '鲁菜',
            value: 93,
            color: '#FFD700',
            description: '咸鲜为主，讲究火候',
            count: 93
          },
          {
            name: '浙菜',
            value: 837,
            color: '#4682B4',
            description: '注重原汁原味，清淡鲜嫩',
            count: 837
          },
          {
            name: '粤菜',
            value: 242,
            color: '#3CB371',
            description: '选料精细，口味清淡',
            count: 242
          },
          {
            name: '鲁菜',
            value: 93,
            color: '#FFD700',
            description: '咸鲜为主，讲究火候',
            count: 93
          }
        ],
        barCategoryGap: '45%',
        label: {
          show: props.type === '2' || props.type === '4', // 启用数值显示
          position: 'top', // 数值显示在柱顶（垂直柱状图）
          color: '#333', // 文字颜色
          formatter: params => params.data.description
        }
      }
    ]
  }
  myChart.value &&
    myChart.value.setOption &&
    myChart.value.setOption(option, true)
}
</script>
